<template>
	<div>

		<div class="app-container">
			<TopInfo />

			<div class="mt-6 text-right">
				<el-button type="primary" @click="add">{{ $t('presets.assembly.add') }}</el-button>
			</div>

		</div>

		<div class="app-container" v-loading="data.mtloading">
			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full">

				<el-table-column prop="id" label="ID" />

				<el-table-column prop="display_name" :label="$t('presets.assembly.name')" show-overflow-tooltip>
					<template #default="scope">
						<div v-for="(itme, key) in JSON.parse(scope.row.display_name)">
							{{ itme }}
						</div>
					</template>
				</el-table-column>

				<el-table-column prop="plugin_name" :label="$t('presets.assembly.identifier')" show-overflow-tooltip />

				<el-table-column prop="type" :label="$t('presets.assembly.pluginType')" show-overflow-tooltip>
					<template #default="scope">
						{{ data.typelist[scope.row.type - 1] }}
					</template>
				</el-table-column>

				<el-table-column prop="fields" :label="$t('presets.assembly.auxiliaryInfo')" show-overflow-tooltip />

				<el-table-column :label="$t('public.operate')">
					<template #default="scope">
						<el-button size="small" type="warning" @click="modify(scope.row)">{{ $t('public.modify')
							}}</el-button>
						<el-button v-prmis="'template_plugins_del'" size="small" type="danger"
							@click="del(scope.row.id)">{{ $t('public.del') }}</el-button>
					</template>
				</el-table-column>

			</el-table>
		</div>

	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import { getpluginsList, delplugins } from '@/api/presets';
import { getlang } from '@/api/manage';
import { useRouter } from "vue-router";
const router = useRouter()
let data = reactive({
	mtloading: false, // 加载
	list: [], // 列表信息
	langlist: [], // 语言列表
	typelist: [ // 插件类型
		$t('presets.assembly.AdTyp'),
		'LOGO',
		$t('presets.assembly.Backendbut'),
		$t('presets.assembly.buyBut'),
		$t('presets.assembly.HelpBut'),
		$t('presets.assembly.codeBut'),
		$t('presets.assembly.gameBut'),
		$t('public.picture'),
		$t('presets.assembly.switchLang'),
		$t('presets.assembly.Store'),
		$t('presets.assembly.H5Display'),
		$t('presets.assembly.Purchase')
	],
	source: { // 筛选数据
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
})

// 获取列表信息
let getlist = () => {
	data.mtloading = true
	getpluginsList(data.source).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}

// 获取接口数据
let geturlins = () => {
	// 获取语言列表
	data.langlist = []
	getlang().then(res => {
		if (res.state == 200) {
			for (let item of res.data) {
				data.langlist.push({
					name: item.name,
					label: item.name + ' - ' + item.lang,
					value: item.lang
				})
			}
		}
	})
}


// 添加组件
let add = () => {
	router.push({ path: '/presets/assembly/add_info' })
}

// 修改
let modify = (e) => {
	let query = {
		l: encodeURI(JSON.stringify({
			info: e
		}))
	}
	router.push({ path: '/presets/assembly/details_info', query: query })
}

// 删除
let del = (e) => {
	ElMessageBox.confirm($t('message.delDatas'))
		.then(res => {
			delplugins({ id: e }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})
}

getlist()
geturlins()

</script>
